<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" :noLeft="false" showTitle="服务详情" showBackground="#EAECEF">
		</myheader>
		<!-- #endif -->
		<view style="margin-top: 5px;padding:0px 10px 0px 10px;">
			<view>
				<view>
					<swiper class="swiper" autoplay circular
						:style="{width:headerPicWidth+'rpx', height: headerPicWidth + 'rpx' }">
						<swiper-item>
							<image :src="serviceInfo.mainPic"
								:style="{width:headerPicWidth+'rpx', height: headerPicWidth + 'rpx' }"
								class="border-top"
								mode="scaleToFill" />
						</swiper-item>
						<swiper-item v-for="(item, index) in serviceInfo.servicePics" :key="index">
							<image :src="item" :style="{width:headerPicWidth+'rpx', height: headerPicWidth + 'rpx' }"
							class="border-top"
								mode="scaleToFill" />
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view style="background-color: white;padding:20px 10px 20px 10px;">
				<view style="font-weight: 700;font-size: 20px;color: #2e4964;">
					{{serviceInfo.name}}
				</view>
				<view style="margin-top: 10px;">
					<view v-for="(tag, index) in serviceInfo.tag" :key="index"
						style="margin-top: 5px;font-size: 14px;color:#8292A2;display: inline-block;margin-right: 5px; border: 1px solid #eaecef;padding: 3px 6px 3px 6px;border-radius: 999px;">
						{{tag}}
					</view>
				</view>
				<view style="margin-top: 15px;color:#1ABC9C;font-size: 28px;">
					免费
				</view>
				<view style="color: #8292A2;font-size: 14px;font-weight: 400;margin-top: 10px;">
					本膳食方案由以下商家提供：
				</view>
				<view style="margin-top: 10px;width: 100%;height: 1px;background-color: #EAECEF;"></view>
				<view @tap="goShopDetail()" style="margin-top: 10px;display: flex;justify-content: flex-start;align-items: flex-start;">
					<view
						style="min-width: 76px;width: 76px;height: 76px;border-radius: 10px;background-color: #EAECEF;">
						<image :src="serviceInfo.storeLogo" mode="scaleToFill"
							style="min-width: 76px;width: 76px;height: 76px;border-radius: 10px;border:1px solid #eaecef" />
					</view>
					<view style="margin-left:10px;flex-grow: 1;display: flex;justify-content: space-evenly;flex-direction: column;height:76px">
						<view style="color: #2E4964;font-size: 16px;font-weight: 700;">{{serviceInfo.storeName}}</view>
						<view style="display: flex;align-items: center;">
								<image src="../../static/address.svg" mode="scaleToFill"
									style="width: 16px;height: 16px;" />
							<view
								style="max-width:400rpx;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; margin-left: 5px;display: inline-block;font-size: 14px;font-weight: 400;color:#8292A2">
								{{serviceInfo.storeAddress}}
							</view>

						</view>
						<view style="display: flex;align-items: center;">
								<image src="../../static/phone.svg" mode="scaleToFill"
									style="width: 16px;height: 16px;" />
							<view
								style="margin-left: 5px;display: inline-block;font-size: 14px;font-weight: 400;color:#8292A2">
								{{serviceInfo.telephone}}
							</view>

						</view>
					</view>
				</view>
			</view>
			<view style="background-color:#F4F6F7 ;padding: 15px 10px 15px 10px" class="border-bottom">
				<view style="color:#8292A2;font-size: 14;font-weight: 400;">
					膳食方案标准发布单位：
				</view>
				<view v-if="serviceInfo.publisherName!=null" style="margin-top: 5px;color:#2E4964;font-size: 14;font-weight: 400;">
					{{serviceInfo.publisherName}}
				</view>
				<view v-if="serviceInfo.publisherName==null" style="margin-top: 5px;color:#2E4964;font-size: 14;font-weight: 400;">
					暂无
				</view>
				<view style="margin-top: 5px;color:#8292A2;font-size: 14;font-weight: 400;">
					原始数据链接：
				</view>
				<view v-if="serviceInfo.originalLink!=null" style="margin-top: 5px;color:#2E4964;font-size: 14;font-weight: 400;white-space: normal;word-break: break-all;">
					{{serviceInfo.originalLink}}
				</view>
				<view v-else style="margin-top: 5px;color:#2E4964;font-size: 14;font-weight: 400;white-space: normal;word-break: break-all;">
					暂无
				</view>
			</view>
			<view style="margin-top: 15px;display: flex;flex-direction: column;" v-if="serviceInfo.detailPics && serviceInfo.detailPics.length>0">
				<image :class="{ 'border-bottom': index == serviceInfo.detailPics.length - 1, 'border-top': index == 0 }" v-for="(pic, index) in serviceInfo.detailPics" :key="index" :src="pic" mode="widthFix" style="width: 100%;" />
			</view>
			<view style="margin-top: 15px;background-color: white;border-radius: 10px;" v-if="checkChinese(serviceInfo.details)">
				<view v-html="serviceInfo.details" class="rich-text"></view>
			</view>
		</view>
		<view style="height: 120px;">
		</view>
		<view class="footer">
			<view class="footer-btn">
				<view class="footer-btn-item" @tap="goShopDetail">
					<image class="footer-btn-item-img" src="../../static/shangjia.svg" alt="" />
					<text class="footer-btn-item-txt">商家</text>
				</view>
				<!-- <view class="footer-btn-item">
					<image class="footer-btn-item-img" src="../../static/logo.svg" alt="" />
					<text class="footer-btn-item-txt">咨询</text>
				</view> -->
				<view v-if="serviceInfo.isCollection == 0" class="footer-btn-item" @tap="collectAction()">
					<image class="footer-btn-item-img" src="../../static/weishoucang.svg" alt="" />
					<text class="footer-btn-item-txt">收藏</text>
				</view>
				<view v-else class="footer-btn-item" @tap="collectAction()">
					<image class="footer-btn-item-img" src="../../static/yishoucang.svg" alt="" />
					<text class="footer-btn-item-txt">取消</text>
				</view>
				<!-- <view class="footer-btn-item">
					<image class="footer-btn-item-img" src="../../static/logo.svg" alt="" />
					<text class="footer-btn-item-txt">分享</text>
					<button open-type="share" class="footer-btn-item-share"></button>
				</view> -->
			</view>
			<view v-if="serviceInfo.isSub==0" @click="dingyue(serviceInfo)"
				style="background-color: #1ABC9C;display: flex;justify-content: center;align-items: center;width:173px;height: 54px;color:white;font-weight: 700;border-radius: 140px;margin-right: 15px;box-shadow: inset 0px -10px 16px 0px rgba(255, 255, 255, 0.15),inset 0px 3px 5px 0px rgba(255, 255, 255, 0.15),inset 3px 10px 15px 0px rgba(255, 255, 255, 0.35);">
				立即订阅</view>
			<view v-if="serviceInfo.isSub==1" @click="goZhuYe()"
				style="background-color: #1ABC9C;display: flex;justify-content: center;align-items: center;width:173px;height: 54px;color:white;font-weight: 700;border-radius: 140px;margin-right: 15px;box-shadow: inset 0px -10px 16px 0px rgba(255, 255, 255, 0.15),inset 0px 3px 5px 0px rgba(255, 255, 255, 0.15),inset 3px 10px 15px 0px rgba(255, 255, 255, 0.35);">
				已订阅，去看看 →</view>
		</view>
		<!-- 		<mytabbar :active="1" :count="0"></mytabbar> -->
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				serviceId: null,
				serviceInfo: null,
				screenWidth: 375,
				headerPicWidth: 710,
			}
		},
		computed: {
			...mapGetters(["nickname"])
		},
		async onShareAppMessage(res) {
			if (res.from == "button") {
				
				return {
					title: "服务邀请",
					path: "/pages/invite/invite",
					imageUrl: "https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/avatar/avatar-1.jpg"
				};
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: function(info) {
					this.screenWidth = info.windowWidth.toString();
					this.headerPicWidth = info.windowWidth - 40;
				}
			});
			if (e.serviceId != null) {
				this.serviceId = e.serviceId;
			} else {
				uni.navigateBack();
			}
		},
		onShow() {
			this.getServiceInfo();
		},
		methods: {
			goShopDetail() {
				uni.navigateTo({
					url: "/pages/shop/shop?shopId=" + this.serviceInfo.storeId
				})
			},
			collectAction() {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
				
					if (this.serviceInfo.isCollection == 0) {
						this.$H.post("portal/favorites/add", { serviceId: this.serviceId }, {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}).then(res => {
							uni.hideLoading();
							if (res.code == 0) {
								this.serviceInfo.isCollection = 1
								uni.showToast({
									title: "收藏成功",
									icon: "none"
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						});
					} else {
						this.$H.delete("portal/favorites/remove", { id: this.serviceId }, {
							'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}).then(res => {
							uni.hideLoading();
							if (res.code == 0) {
								this.serviceInfo.isCollection = 0
								uni.showToast({
									title: "取消成功",
									icon: "none"
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
							}
						});
					}
				}
			},
			dingyue(service) {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					let postData = {
						"serviceId": service.id,
					}
					uni.showLoading({
						title: '正在订阅...',
						mask: true
					});
					this.$H.post("portal/sub/sub?serviceId=" + service.id + '&storeId=' + service.storeId, postData).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: "订阅成功",
								icon: "none"
							})
							this.getServiceInfo();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					});
				}
			},
			goZhuYe() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			checkChinese(val) {
				var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
				if (reg.test(val)) {
					return true;
				}
				return false;
			},
			getServiceInfo() {
				let url = "portal/sub/searchDetail"
				if (!this.nickname) {
					url = "portal/sub/searchDetailNL"
				}
				this.$H.get(url, {
					"serviceId": this.serviceId
				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						this.serviceInfo = res.data;
						if (this.serviceInfo.servicePics == null) {
							this.serviceInfo.servicePics = [];
						}
						if (this.serviceInfo.details != null && this.serviceInfo.details != "") {
							this.serviceInfo.details = this.setRichTextImage(this.serviceInfo.details);
						}
						this.$forceUpdate();
					}
				});
			},
			setRichTextImage(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		}
	}
</script>

<style scoped lang="scss">
.border-top {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.border-bottom {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
	.content {
		padding: 0rpx 10px 0rpx 10px;
	}

	.content-tag {
		color: #8292A2;
		font-size: 16px;
		font-weight: 400;

	}

	.footer {
		position: fixed;
		bottom: 0px;
		height: 110px;
		background-color: white;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-btn {
			flex:1;
			display: flex;
			margin: 0 24rpx;
			&-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				&-img {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 10rpx;
				}
				&-txt {
					font-size: 24rpx;
					color: #1ABC9C;
				}
				&-share {
					position: absolute;
					left: 0;
					top:0;
					opacity: 0;
					width: 100%;
					height:100%
				}
			}
		}
	}

	.rich-text {
		color: #2e4964;
		padding: 10px;

		img {
			width: 100%;
		}
	}
</style>